<!-- 在制品总查询-->
<template>
	<div style="background-color: #F5F8FF;">
		<div class="searchBgc">
			<div class="serachGo">
				<picker mode="date" @change="startTimePick">
		            <div class="startTime">
		            	<image src="../../../static/zlqx_gx_rq_n_icon.png" style="margin-left: 20px;margin-right:22upx;width: 32upx;height: 32upx;" mode="scaleToFill"></image>
		            	<text class="list-value">{{startTime}}</text>
		            </div>
		        </picker>
			</div>
			<div class="serachButton" @click="serachButton">
				<image src="../../../static/zzp_ss_icon.png" style="width: 45upx;height: 45upx;" mode="scaleToFill"></image>
			</div>
		</div>
		<view class="list-header">
			<view class="list-cell">
				<text class="cell-top">{{inter.zzp}}</text>
			</view>
			<view class="list-cell">
				<text class="cell-top">{{inter.quantity}}</text>
			</view>
		</view>
		<view class="list-body" v-for="(item,index) in listData" :key="index" :class="[index%2==0?'iswhite':'isgray']">
			<view class="body-cell">
				<text>{{item.WIP}}</text>
			</view>
			<view class="body-cell">
				<text>{{item.Quantity}}</text>
			</view>
		</view>
	</div>
</template>

<script>
	import $api from '@/api/api.js'
	import $inter from '@/api/international.js'
	
	function loadData(that){
		uni.showToast({
			title: 'loading',
			icon:'loading',
			mask:true,
		});
		$api.getWIPSummary({
			ExcDate:that.startTime,
			Model_Code:''
		},res=>{
			  console.log("111"+JSON.stringify(res));
			 that.listData=res
			uni.hideToast()
		},err=>{
			uni.showToast({
				title:'data err',
				icon:'none',
				mask:true
			})
			console.log("222"+JSON.stringify(err));
		},e=>{
			
		})
	}
	
	function getAllModel(that){
		$api.getAllModel(res=>{
			  console.log("111"+JSON.stringify(res));
			  that.allModel=res
			uni.hideToast()
		},err=>{
			uni.showToast({
				title:'data err',
				icon:'none',
				mask:true
			})
			console.log("222"+JSON.stringify(err));
		},e=>{
			
		})
		
	}
	
	export default{
		components: { },
		data(){
			return{
				languageValue:'',
				internatinal:'',
				listData:['你好'],
				allModel:[],
				startTime:"2019-03-01",
				endTime:"2019-03-29"
			}
		},
		onLoad() {
			this.startTime = $api.getPreFormatDate()
			this.endTime = $api.getNowFormatDate()
			loadData(this)
			uni.getStorage({
				key:'languageValue',
				success:(res)=>{
					this.languageValue = res.data
					uni.setNavigationBarTitle({
						title:this.inter.zzphz
					})
				}
			})
		},
		methods: {
			startTimePick(e){
				this.startTime = e.target.value
			},
			endTimePick(e){
				this.endTime = e.target.value
			},
			serachButton(){
				loadData(this)
			}
		},
		computed:{
			inter(){
				console.log("1111111"+this.languageValue);
				if (this.languageValue == '简体中文') {
					return $inter.producting.defect
				} else{
					return $inter.producting.defect
				}
			}
		}
	}
</script>

<style>
	.searchBgc{
		height: 110upx;
		background-color: #0C9CDC;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 15upx;
	}
	.serachGo{
		width:636upx;
		height: 64upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 8upx;
		background-color: #FFFFFF;
	}
	.startTime{
		width: 315upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.wheel-type{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 30upx;
	}
	.verticalLine{
		width: 2upx;
		height: 45upx;
		background-color: #9B9B9B;
	}
	.serachButton{
		height: 64upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 15upx;
	}
	.list-value{
		font-size: 28upx;
		color: #2F2F2F;		
	}
	.list-header{
		width: 700upx;
		height:80upx;
		background:rgba(225,246,255,1);
		display: flex;
		margin-left: 25upx;
		margin-top: 25upx;
	}
	.list-cell{
		width: 350upx;
		height: 75upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.list-body{
		width:700upx;
		height:65upx;
		display: flex;
		margin-left: 25upx;
	}
	.body-cell{
		width: 350upx;
		height: 65upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #5D5D5D;
		font-size: 26upx;
	}
	.cell-top{
		color: #2F2F2F;
		font-size: 28upx;
		font-weight:400;
	}
	.cell-bottom{
		color: #0C9CDC;
		font-size: 30upx;
		font-weight:400;
	}
	.iswhite{
		background: #FFFFFF;
	}
	.isgray{
		background: #F6F6F6;
	}
</style>
